<script lang="ts" setup>
import { KeyValues } from '../../utils/types';
import { hBtns, UiDataView ,openModal} from '../../utils'
import { Plus } from '@element-plus/icons-vue'
import { onMounted, ref, nextTick } from 'vue'
import { DataViewRef, PageFetchAction, TableCellBtn, TableColumnConfig } from '../../utils/types'

const cls = 'ui-api-editor-dict-item'

const props = defineProps<{
  row: KeyValues
}>()
const tableRef: DataViewRef = ref()

const columns = [
  { label: '类型', prop: 'ruleName' },
  { label: '数据值' },
  { label: '标签名' },
  { label: '描述' },
  { label: '排序' },
  { label: '数据类型' },
  { label: '备注信息' },
  {
    label: '操作',
    fixed: 'right',
    width: 120,
    render (h, { row }) {
      return hBtns([
        { label: '编辑', onClick: onEdit.bind(null, row) },
        { label: '删除', onClick: onDelete.bind(null, row ) },
      ] as TableCellBtn[])
    }
  }
] as TableColumnConfig<any>[]

const fetchAction: PageFetchAction = params => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        total: 2,
        data: [{ ruleName: 'test' }]
      })
    }, 500)
  })
}

const onDelete = (row: any) => {
  tableRef.value.deleteRows(() => {
    return Promise.resolve()
  })
}


const onEdit = (row?: any) => {
  openModal(() => import('./DictItemEdit.vue'), {
    row,
    title: `${row ? '编辑' : '新增'}`,
    onSubmitted ({ form }) {
    }
  })
}
onMounted(async () => {
  await nextTick()
  tableRef.value.getData()
})
</script>

<template>
  <ElDrawer :class="`${cls}`">
    <UiDataView ref="tableRef" :columns="columns" :fetch-action="fetchAction" :hidePager="true">
      <template #actions="{ selectedRows }">
        <ElButton :icon="Plus"  @click="onEdit()">新增</ElButton>
      </template>
    </UiDataView>
  </ElDrawer>
</template>

<style lang="scss">
.ui-api-editor-dict-item{
  width: 900px !important ;
}

</style>
